/**
 * Copyright (c) 2020 kedacom
 * OpenATC is licensed under Mulan PSL v2.
 * You can use this software according to the terms and conditions of the Mulan PSL v2.
 * You may obtain a copy of Mulan PSL v2 at:
 * http://license.coscl.org.cn/MulanPSL2
 * THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
 * EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
 * MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
 * See the Mulan PSL v2 for more details.
 **/
<template>
  <div class="layer-control">
  </div>
</template>
<script>
import L from 'leaflet'
import { GetAllDevice } from '../../../../api/device'
import PhaseMarker from '../../../../components/PhaseMarker'
import { getMessageByCode } from '../../../../utils/responseMessage'
import PhaseMarkerVue from './index'
import store from '../../../../store'
// import { getPhaseControlName } from '../../../../utils/PhaseStateUtil.js'
import { getTscPhase } from '../../../../api/route'
export default {
  name: 'layerControl',
  components: { PhaseMarker },
  props: {
    targetDeviceIds: {
      type: Array,
      default: () => []
    },
    // showLevel: {
    //   type: Number,
    //   default: 2
    // },
    isShowPattern: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    showLevel (val) {
      this.handleMapDevice(this.getShowList())
    },
    targetDeviceIds (val, old) {
      this.hideLayer()
      if (this.isShowPattern) {
        this.showLayer()
      }
    },
    isShowPattern (val) {
      if (val) {
        this.showLayer()
      } else {
        this.hideLayer()
      }
    }
  },
  data () {
    return {
      showLevel: 2,
      map: null,
      patternLayer: null,
      devList: [],
      dirshow: [],
      showList: [],
      timer: null,
      domMap: new Map(),
      phaseListMap: new Map(),
      devMessageMap: new Map()
    }
  },
  destroyed () {
    this.hideLayer()
    this.doSub(false)
  },
  methods: {
    getAllAdevice () {
      GetAllDevice().then(res => {
        if (!res.data.success) {
          this.$message.error(getMessageByCode(res.data.code, this.$i18n.locale))
          return
        }
        this.devList = res.data.data
        this.map = window.map
        let list = this.getShowList()
        this.handleMapDevice(list)
      })
    },
    getShowList () {
      let list = this.devList.filter(dev => {
        return dev.state !== 'DOWN'
      })
      if (this.targetDeviceIds && this.targetDeviceIds.length > 0) {
        list = list.filter(dev => {
          return this.targetDeviceIds.includes(dev.agentid)
        })
      }
      this.showList = list
      return list
    },
    handleMapDevice (devs) {
      if (this.patternLayer) {
        this.patternLayer.clearLayers()
      }
      let markers = []
      this.patternLayer = L.layerGroup(markers)
      this.map.addLayer(this.patternLayer)
      for (let dev of devs) {
        let row = this.devList.filter(item => item.id === dev.id)[0]
        let htmlStr =
          `
            <div id="test1">
            </div>
          `
        let coordinates = row.geometry.coordinates.slice().reverse()
        let iconAnchor = [coordinates[0] + 26, coordinates[1] - 25]
        console.log('this.showLevel', this.showLevel)
        if (this.showLevel === 3) {
          iconAnchor = [coordinates[0] + 87, coordinates[1] - 10]
        }
        // let iconAnchor = [coordinates[0] - 50, coordinates[1] - 80]
        let icon = L.divIcon({
          html: htmlStr,
          iconSize: [80, 80],
          iconAnchor: iconAnchor,
          className: 'map-circle'
        })
        L.marker(coordinates, {icon: icon}).addTo(this.patternLayer)
        let dom = new PhaseMarkerVue({})
        dom.$mount(`#test1`)
        this.domMap.set(dev.agentid, dom)
      }
      this.doSub(true)
    },
    getList () {
      this.hideLayer(this.patternLayer)
      this.getAllAdevice()
    },
    hideLayer () {
      if (this.map) {
        this.map.removeLayer(this.patternLayer)
      }
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    showLayer () {
      let _this = this
      this.$nextTick(() => {
        _this.getAllAdevice()
      })
    },
    async recvMessage (message) {
      let zoom = window.map.getZoom()
      if (zoom < 17) {
        this.showLevel = 2
      } else {
        this.showLevel = 3
      }
      if (message.success === false && message.code === '3015') return
      let item = message
      if (item.hasOwnProperty('agentid')) {
        let syncTime = item.data.syncTime
        let runTime = item.data.cycle - item.data.syncTime
        let patternid = item.data.patternid
        let phase = item.data.phase
        let curpattern = item.data.name
        let cycle = item.data.cycle
        let offset = item.data.patternoffset
        // let controlName = getPhaseControlName(item.data.control)
        let controlName = this.$t('openatccomponents.overview.modelList' + item.data.control)
        let currentPhase = item.data.current_phase
        let res = this.getCutDown(currentPhase, phase)
        let dirshow = []
        let phaseList = await this.getPhaseListFromMap(item.agentid)
        dirshow = this.getCurPhaseStatus(currentPhase, phase, phaseList)
        let params = {
          agentid: item.agentid,
          dirshow: dirshow,
          runTime: runTime,
          syncTime: syncTime,
          patternid: patternid,
          phaseCountdownColor: this.phaseCountdownColor,
          countdown: res.countdown,
          split: res.split,
          control: item.data.control,
          controlName: controlName,
          cycle: cycle,
          offset: offset,
          curpattern: curpattern
        }
        this.devMessageMap.set(item.agentid, params)
        if (!this.timer) {
          this.timer = setInterval(() => {
            // eslint-disable-next-line no-unused-vars
            for (let [key, value] of this.devMessageMap) {
              // console.log(key, value)
              let tagetParams = value
              tagetParams.countdown = tagetParams.countdown > 0 ? tagetParams.countdown - 1 : 0
              tagetParams.runTime = tagetParams.runTime < tagetParams.cycle ? tagetParams.runTime + 1 : tagetParams.cycle
              let dom = this.domMap.get(tagetParams.agentid)
              dom.show(tagetParams.dirshow, tagetParams, this.showLevel)
            }
          }, 1000)
        }
      }
    },
    // 获取当前相位列表
    getCurPhaseStatus (currentPhase, phase, phaseList) {
      let dirshow = []
      if (!currentPhase || !phase || !phaseList) {
        return []
      }
      for (let id of currentPhase) {
        let phaseStatus = phase.filter(item => item.id === id)[0]
        let planphaseDir = phaseList.filter(item => item.id === id)[0]
        let color = this.getColorByType(phaseStatus.type)
        this.phaseCountdownColor = color
        for (let dir of planphaseDir.direction) {
          dirshow.push({
            id: dir,
            color: color
          })
        }
      }
      return dirshow
    },
    // 根据类型获取相色
    getColorByType (type) {
      let color = '#333333'
      switch (type) {
        case 1:
          color = 'red'
          break
        case 2:
          color = '#eabb24'
          break
        case 3:
          color = 'green'
          break
        case 4:
          color = 'green'
          break
        case 5:
          color = '#eabb24'
          break
        default: break
      }
      return color
    },
    getCutDown (currentPhase, phase) {
      let res = {
        id: 0,
        countdown: 0,
        split: 0,
        type: 1
      }
      if (currentPhase && currentPhase.length >= 2) {
        let curPhaseState = phase.filter((item) => {
          return item.id === currentPhase.find((val) => {
            return item.id === val
          })
        })
        let min = Math.min.apply(Math, curPhaseState.map(o => { return o.countdown === undefined ? 0 : o.countdown }))
        let ret = phase.filter(v => v.countdown === min)
        if (ret && ret.length > 0) {
          res = ret[0]
        }
      } else if (currentPhase && currentPhase.length === 1) {
        res = phase.filter(v => v.id === currentPhase[0])[0]
      }
      return res
    },
    // 根据id获取相位的方向数组
    getDirShow (id, phase, phaseList) {
      let phaseStatus = phase.filter(item => item.id === id)[0]
      let planphaseDir = phaseList.filter(item => item.id === id)[0]
      let color = this.getColorByType(phaseStatus.type)
      this.phaseCountdownColor = color
      for (let dir of planphaseDir.direction) {
        this.dirshow.push({
          id: dir,
          color: color
        })
      }
    },
    getTscParam (devid) {
      let _this = this
      return new Promise((resolve, reject) => {
        getTscPhase(devid).then((res) => {
          if (res.data.success !== true) {
            return
          }
          let params
          try {
            params = res.data.data.data
            let pahseList = params.phaseList
            _this.planphaselist = pahseList
            resolve(pahseList)
          } catch (error) {
            reject(error)
          }
          resolve(params)
        })
      })
    },
    async getPhaseListFromMap (devid) {
      let phaseList = this.phaseListMap.get(devid)
      if (!phaseList || phaseList.length === 0) {
        phaseList = await this.getTscParam(devid)
        this.phaseListMap.set(devid, phaseList)
      }
      return phaseList
    },
    getReqData () {
      let reqData = []
      for (let dev of this.showList) {
        // let devtype = dev.type
        let agentid = dev.agentid
        let simuid = agentid
        reqData.push(simuid)
      }
      return reqData
    },
    async doSub (flag) {
      let ssSubMgr = store.getters['wsSubMgr']
      this.wsSubMgr = ssSubMgr
      let CrossStatSubMgr = this.wsSubMgr.getByName('CrossState')
      this.sub = CrossStatSubMgr.getSubByType('status/pattern', 'asc')
      // this.sub.start([simuid]) // wholist = []
      let reqData = this.getReqData()
      if (!flag) {
        this.sub.stop(reqData)
      } else {
        await this.sub.start(reqData)
        this.sub.addCare(this.recvMessage, this)
      }
    }
  }
}
</script>
